<template>
  <div class="content">
    <div class="search-content">
      <!-- 顶部搜索框 -->
      <a-form :model="formState" :labelCol="{ span: 6 }" @submit="onSubmit">
        <a-row>
          <a-col :span='5'>
            <a-form-item label="物料编号">
              <a-input v-model:value="formState.partCode" placeholder="请输入物料编号" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="物料名称">
              <a-input v-model:value="formState.partCode" placeholder="请输入物料名称" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="创建日期">
              <a-range-picker v-model:value="formState.createdDate" show-time value-format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="MO号">
              <a-input v-model:value="formState.moNo" placeholder="请输入MO号" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="工作中心">
              <a-input v-model:value="formState.workCenterName" placeholder="请输入工作中心名称" allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :span='5'>
            <a-form-item label="状态">
              <a-select v-model:value="formState.productionOrderStateName" placeholder="请选择状态" :options="stateOptions" :allowClear="true"/>
            </a-form-item>
          </a-col>

          <a-col :span='5'>
            <a-form-item label="计划日期">
              <a-range-picker v-model:value="formState.plannedStartDate" show-time value-format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
      
          
          <a-col :span='5'>
            <div style="display:flex;justify-content: center;align-items: center;">
              <a-button type="primary" html-type="submit">查询</a-button>
              <a-button type="primary" style="margin-left:10px;">修改</a-button>
              <a-button type="primary" style="margin-left:10px;">重新发布</a-button>
            </div>
              
            
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="content-box">
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="排产计划">
          <planningSchedulingTable ref="planningSchedulingTableRef" :searchParams="formState"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="甘特图">
          <assemblySchedulingGantt ref="assemblySchedulingGanttRef" :searchParams="formState"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  <!-- 工作中心 -->
  <workCenterListSelectModel @register="workCenterModal" @getSelectResult="workCenterHandleSuccess"></workCenterListSelectModel>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import workCenterListSelectModel from '/@/views/components/workCenterListSelectModel.vue';
  import { useModal } from '/@/components/Modal';
  import planningSchedulingTable from './components/planningSchedulingTable.vue';
  import assemblySchedulingGantt from '/@/views/components/assemblySchedulingGantt.vue';
  // 定义子组件实例
  const planningSchedulingTableRef = ref(null);
  const assemblySchedulingGanttRef = ref(null);
  const emit = defineEmits(['updateSerach']);
  const formState = reactive({
    createdDate: [],
    moNo: '',
    workCenterName: '',
    productionOrderStateName: null,
    releasedDate: [],
    plannedStartDate: [],
    partCode: ''
  });
  const stateOptions = reactive([
    { label: '已完成', value: '已完成' },
    { label: '暂停', value: '暂停' },
    { label: '生产中', value: '生产中' },
  ]);
  const activeKey = ref('1');
  // 注册工作中心筛选框
  const [workCenterModal, { openModal: openWorkCenterModal }] = useModal();
  //打开选择工作中心
  function workCenterModalOpen(props) {
    openWorkCenterModal(true);
  }
  //工作中心回写
  function workCenterHandleSuccess(val, values) {
    formState.workCenterName = val[0].label;
  }
  function onSubmit() {
    // 调用子组件暴露的方法
    // 调用子组件暴露的方法
    if(activeKey.value == 1)  planningSchedulingTableRef.value.getList();
    else assemblySchedulingGanttRef.value.getList();
  }
</script>

<style lang="less" scoped>
  .content {
    margin: 20px 10px;
    padding: 20px 10px;
    background-color: #fff;
    .content-box {
      // height: 62vh;
    }
  }
</style>
